<template>
    <!-- 把该标签里面所有内容，在页面上给我渲染到 .sdy-header 这个标签里 -->
    <Teleport to=".sdy-header">
    <van-nav-bar  :title="title"  :left-arrow="back">
        <template #left>
            <slot name="left">
                <van-icon class="back-btn" name="arrow-left" />
            </slot>
        </template>
        <template #title>
            <slot name="title">{{ title }}</slot>
        </template>
        <template #right>
            <slot name="right"></slot>
        </template>
    </van-nav-bar>
    </Teleport>
</template>

<script setup lang="ts">

import { defineProps, Teleport } from 'vue'

interface MyTopBar {
    title: string,
    back?: boolean
}
// 接受父组件传递的数据
defineProps<MyTopBar>()



</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
//覆盖样式
:deep(.van-nav-bar__content) {
     background-color: $globalColor;
        }
.back-btn {
    font-size: 24px;
    color: black!important;
    }
</style>